<template>
  <div class="tags-view-container">
    <el-scrollbar class="tags-view-wrapper">
      <div class="tags-view-item-container">
        <router-link
          v-for="tag in visitedViews"
          :key="tag.fullPath || tag.path"
          :to="tag.fullPath || tag.path"
          :class="['tags-view-item', { active: isActive(tag), affix: tag.affix }]"
          @contextmenu.prevent="openMenu(tag, $event)"
        >
          {{ tag.title }}
          <el-icon
            v-if="!tag.affix"
            class="close-icon"
            @click.prevent.stop="closeSelectedTag(tag)"
          >
            <Close />
          </el-icon>
        </router-link>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { computed, watch, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useTagsViewStore } from '@/stores/tagsView'
import { Close } from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()
const tagsViewStore = useTagsViewStore()

const visitedViews = computed(() => tagsViewStore.visitedViews)

const isActive = (tag) => (tag.path === route.path || tag.fullPath === route.fullPath)

// 关闭选中标签
const closeSelectedTag = async (view) => {
  const res = await tagsViewStore.delView(view)
  if (isActive(view)) toLastView(res.visitedViews)
}

const toLastView = (visited) => {
  const latest = visited.slice(-1)[0]
  if (latest) {
    router.push(latest.fullPath || latest.path)
  } else {
    router.push('/dashboard')
  }
}

// 路由变化时添加标签
const addTags = () => {
  if (!route.name) return
  tagsViewStore.addView({
    name: route.name,
    path: route.path,
    fullPath: route.fullPath,
    title: route.meta?.title || (route.name && String(route.name)) || 'No Title',
    affix: !!route.meta?.affix,
    meta: route.meta
  })
}

watch(() => route.fullPath, addTags, { immediate: true })

// 初始化固定标签（确保 /dashboard 存在且置前）
nextTick(() => {
  tagsViewStore.ensureAffix([
    { path: '/dashboard', name: 'Dashboard', title: '工作台', affix: true, fullPath: '/dashboard' }
  ])
})

// 空实现：右键菜单扩展位
const openMenu = () => {}
</script>

<style scoped>
/* 仅替换 TagsView.vue 的 <style scoped> 部分 */
.tags-view-container {
  height: 100%;
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-bd);
}
.tags-view-wrapper { height: 100%; }
.tags-view-item-container {
  display: flex; align-items: center;
  height: 100%;
  padding: 0 12px;
  gap: 6px;
}
.tags-view-item {
  display: inline-flex; align-items: center;
  height: 28px; padding: 0 10px;
  font-size: 12px;
  background: var(--tag-bg);
  color: var(--tag-txt);
  border: 1px solid var(--tag-bd);
  border-radius: 999px;
  text-decoration: none;
  transition: all .2s ease;
}
.tags-view-item:hover { border-color: var(--brand); color: var(--brand); }
.tags-view-item.active {
  background: var(--tag-active-bg);
  color: var(--tag-active-txt);
  border-color: var(--tag-active-bg);
  box-shadow: var(--shadow-s);
}
.close-icon {
  margin-left: 6px; font-size: 12px; cursor: pointer; border-radius: 50%;
  transition: background-color .2s; padding: 2px;
}
.close-icon:hover { background-color: rgba(0,0,0,0.06); }
</style>